<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>其他服务</title>
	<script type="text/javascript" src="../public/maincss.js"></script>
	<link href="../css/cloudservice.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../public/main.js"></script>

	<style>
		.heading2 h2{font-size: 24px;line-height: 30px;padding-bottom: 20px;color: #067bc6;}
		.heading2-bk{left: 50%;height: 3px;width: 100px; margin:0 auto;background: #6790d0;}
		<!--lunbo -->
		html,body{height: 100%;}
		#container {width: 100%;height: 500px;overflow: hidden;}
		.sections,.section {height:100%;}
		#container,.sections {position: relative;}
		.section {background-color: #000;background-size: cover;background-position: 50% 50%;text-align: center;color: white;}
		#section0 {background-image: url('/default/images/index_23.jpg');}
		#section1 {background-image: url('/default/images/index_25.jpg');}
		#section2 {background-image: url('/default/images/index_26.jpg');}
		.pages.horizontal{bottom:22%;}
		section {min-width: 1200px}
		section .col-md-3 {padding-left: 0; padding-right: 0; display: table-cell}
		section .col-md-2,.col-md-5,.col-md-7,.col-md-4 {display: table-cell}
		.product-container{background: #fff;height: 500px;width: 1150px;}
		.pro-title{text-align: center;}
		.pro-title h2{color: #6790d0;}
		.pro-title span{
			display: inline-block;
			font-size: 29px;
			color: #6790d0;
			margin-top: 24px;
			height: 46px;
			border-bottom: 2px solid #6790d0;
			font-weight: bold;
		}
		.pro-con{
			text-align: center;
			margin: auto;
			width: 98%;
			/*display: flex;*/
			margin-top: 22px;
		}
		.pro-item {
			width: 330px;
			height: 357px;
			border: 1px solid #EBEEF5;
			text-align: center;
			margin-left: 20px;
		    float: left;
    		margin-bottom: 29px;
			-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		}
		.anli-con{
			margin: 0;
		}

		.pro-item:first-child{margin-left: 18px;}
		.pro-item .common-wid{
			width: 253px;
			margin: auto;
		}
		.pro-item .title {
			height: 99px;
			color: #fff;
			width: 100%;
			margin: auto;
			background: #0B65B9;
			padding-top: 24px;
		}
		.pro-item .title h2{
			height: 38px;
			font-size: 22px;
			font-weight: bold;
		}

		.pro-item .title span{
			font-size: 14px;
		}
		.pro-item .line{
			border-top: 1px solid #c8c8c8;
			margin-bottom: 5px;
			margin-top: 37px;
		}
		.pro-item .info{
			padding-top: 5px;
		}
		.pro-item .info dl{
			height: 30px;
			/* text-align: center; */
			font-size: 15px;
			width: 253px;
		}
		.pro-item .info dl dd{
			float: left;
			width: 50%;
		}

		.pro-item .pro-buy{    display: flex;}
		.pro-item  .pro-price{
			width: 58%;
			text-align: left;
		}
		.pro-item .pro-buy .price {
			color: #ff7200;
			text-align: left;
			font-size: 25px;
		}
		.pro-item .pro-buy .pro-buy-btn {width: 42%;}
		.pro-item .pro-buy .pro-buy-btn a{color: #ff7200;font-size: 18px;font-weight: bold;height: 50px;line-height: 52px;}
		.vhost-rmk,.vhoost-title{color: #fff;}
		.vhost-buy{   display: block;
			background: #0B65B9;
			color: #fff;
			padding: 11px 20px;
			margin-left: 77px;
			font-size: 15px;
		}
		.vhost-buy:hover{color: #fff;}
        .product-containers{width: 1150px;background: #fff;}
        .anli-con{margin: 0 auto;}
        .product-item {
		    width: 375px;
		    float: left;
		}
		.search-btn{
		    background: #0C6FCC;
		    color: #fff;
		    border-radius: 0;
		    width: 125px;
		    height: 44px;
		}
		.search-inp{
			width: 400px;
		    border-radius: 0;
		    height: 44px;
		    margin-top: 20px;
		}
		input.el-input__inner {
		    height: 44px;
		    border: 1px solid #358de2;
		    border-radius: 0;
		    width: 400px;
		}
		button.el-button.search-btn.el-button--success {
		    background: #358de2;
		    color: #fff;
		}
	</style>
</head>
<body>
<!--头部开始-->
<div id="header"></div>
<!--头部结束-->

<div id="content">
	<div id="main-block">
		<div class="host-content" v-if="!isDiy">
			<div class="wide1190">
				<!-- 选项卡 -->
				<ul class="wjf-ui-tab-style2 cl" id="className">
					<li><a href="javascript:void(0);" class="active" v-html="category.categoryName"></a></li>
				</ul>
				<div class="cloud-main">
					<div style="background: #fff;text-align: center;">
						<el-input class="search-inp"  placeholder="请输入搜索内容" v-model="productName" class="input-with-select">
							<el-button class="search-btn" icon="el-icon-search" slot="append" type="success" @click="getProductListSerch">搜索</el-button>
					  	</el-input>
					</div>
					<div id="main-m">
						<div class="cloud-main-l nav-main" id="a1">
							<div class="w-1200" style="padding: 1px 0px 0px 0px">
								<section>
									<div class="anli-con of product-containers">
										<div class="pro-con">
											<div class="product-item" v-for="product in proList">


											<div class="pro-item"  style="height: 368px;">
												<div class="title common-wid">
													<h2 v-html="product.productName" class="vhoost-title"></h2>
													<span class="vhost-rmk">物美实惠,安全稳定,快捷方便！</span>
												</div>
												<div class="info common-wid">
													<div style="height: 153px;font-size: 15px;margin-top: 7px;text-align: left;line-height: 29px;" v-html="product.productDetail.replace(/\n/g, '<br />')"></div>
												</div>
												<div class="line common-wid " style=""></div>
												<div class="common-wid pro-buy">
													<div class="pro-price" v-if="product.productParam.payPrice1 > 0">
														<span class="price" v-html="product.productParam.payPrice1"></span> 元/月
													</div>
													<div class="pro-price" v-else-if="product.productParam.payPrice3 > 0">
														<span class="price" v-html="product.productParam.payPrice3"></span> 元/季度
													</div>
													<div class="pro-price" v-else-if="product.productParam.payPrice6 > 0">
														<span class="price" v-html="product.productParam.payPrice6"></span> 元/半年
													</div>
													<div class="pro-price" v-else>
														<span class="price" v-html="product.productParam.payPrice12"></span> 元/年
													</div>
													<div class="pro-buy-btn">
														<a :href="linkRoot + product.productCode">立即购买</a>
													</div>
												</div>
											</div>
											</div>
										</div>
									</div>
								</section>

								<div class="block" style="margin-top: 20px;text-align: center;height: 50px;">
									<!-- <el-pagination
										<layout="prev, pager, next">
										<@current-change="changePage"->
										<@prev-click="changePage">
										<@next-click="changePage">
										<:total="page.total">
									</el-pagination> -->
									<el-pagination
								      @current-change="changePage"
								      @prev-click="changePage"
								      @next-click="changePage"
								      :page-size="page.size"
								      layout="total, prev, pager, next"
								      :total="page.total">
								    </el-pagination>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div v-if="isDiy">
			<iframe :src="diyPage" width="100%" :height="diyHeight" style="border: none; overflow: hidden; " scrolling="no" name="diyForm" id="diyForm"></iframe>
		</div>
	</div>
</div>
<!--底部开始-->
<div id="footer"></div>
<!--底部结束-->
<script src="index.js"></script>
</body>
</html>
